<template>
    <div class="home">
      <van-search
    v-model="value"
    placeholder="请输入搜索关键词"
    input-align="center"
  />
  <div class="lunbo">
    <van-swipe class="my-swipe" :autoplay="2000" indicator-color="white" >
    <van-swipe-item v-for="(item,index) in bannerList" v-bind:key="index">
    <img :src="item.bannerUrl" alt="">
    </van-swipe-item>
  </van-swipe>
  </div>
  <div class="btns">
      <div class="top">
        <p>猜你喜欢</p>
      </div>
      <div class="center">
        <div>综合排序</div>
      <div @click="sheng">距离最近</div>
      <div @click="xiaoliang">销量最高</div>
      <div>筛选</div>
      </div>
      <div class="bottom"  >
        <div @click="toDetail(item.mtWmPoiId)" v-for="(item,index) in shopList" v-bind:key="index">
          <img :src="item.picUrl" alt="">
          <h5>{{item.name}}</h5>
     
          <p>{{item.distance}}</p>
          <p>{{item.monthSalesTip}}</p>
        </div>
      </div>
      </div>
      <!-- <van-tabbar v-model="active">
  
    <van-tabbar-item icon="wap-home">首页</van-tabbar-item>
    <van-tabbar-item icon="point-gift">爆爆团</van-tabbar-item>
    <van-tabbar-item icon="label">订单</van-tabbar-item>
    <van-tabbar-item icon="manager">我的</van-tabbar-item>
  </van-tabbar> -->
    </div>
  </template>
  
  <script setup>
  import { ref ,onMounted,} from 'vue';
  import {  dp_list,lunbo_list} from '../../api/api';
  import { useRouter } from 'vue-router';
 var $router=useRouter()
  
    
      const value = ref('');
      const active = ref(0);
      const icon = {
        active: 'https://fastly.jsdelivr.net/npm/@vant/assets/user-active.png',
        inactive:
          'https://fastly.jsdelivr.net/npm/@vant/assets/user-inactive.png',
      };
      var shopList=ref([]);
      var bannerList=ref([]);
      var sheng=()=>{
        shopList.value.sort((a, b) => {
          return parseFloat(a.distance) - parseFloat(b.distance);
        });
      }
   
      
        var xiaoliang=()=>{
          shopList.value.sort((a, b) => {
          console.log(parseInt(a.monthSalesTip.substring(2)));
          
          return parseInt(b.monthSalesTip.substring(2)) - parseInt(a.monthSalesTip.substring(2));
        });
       }
      var toDetail=(id)=>{
        console.log(id);
      $router.push('/detail/'+id)
     }
     var goSearch=()=>{
      $router.push('/search')
     }
      //商品列表
      onMounted(()=>{
        dp_list().then((res)=>{
          shopList.value=res.data.list
          console.log(shopList);
          
        })
      //轮播图列表
        lunbo_list().then((res)=>{
          bannerList.value=res.data.list
          console.log(bannerList);
        })
      })
     
   
  
  </script>
  
  <style scoped>
    .my-swipe .van-swipe-item {
      color: #fff;
      font-size: 20px;
      line-height: 150px;
      text-align: center;
      height: 150px;
      background-color: #39a9ed;
    }
    .btns{
      margin-top: 30px;
    }
    .lunbo{
      width: 375px;
      height: 150px;
      padding: 10px;
      box-sizing: border-box;
    }
    .my-swipe img{
      width: 100%;
     height: 100%;
    }
    .input{
      color: black;
      font-size: 14px;
    }
     .my-swipe {
      margin: 10px;
    }
    .my-swipe img{
      height: 100%;
      width: 100%;
    }
    
    .inputbox{
      width: 100%;
      height: 100%;
      background: linear-gradient(to right, #00BBFF, #0095FF);;
      color: white;
      font-size: 20px;
      font-weight: bold;
      padding: 0 20px;
      box-sizing: border-box;
      padding: 10px 20px;
    
    }
    .shangpin{
      height: 100%;
    }
    .inputbox p{
      margin-bottom: 20px;
      font-family: '楷体';
    }
    input{
      border-radius: 15px;
      width: 100%;
      height: 28px;
      text-align: center;
      border: 0;
    }
    
    
  .top{
  margin: 10px 15px;
  }
  .center{
    display: flex;
    justify-content: space-around;
    font-size: 14px ;
    font-weight: bold;
    margin-bottom: 10px;
  }
  
  .bottom{
    height: 320px;
   overflow: auto;
  }
  .bottom div{
    display: flex;
    width: 100%;
    justify-content: space-around;
    margin-bottom: 10px;
    background: white;
  }
  .bottom h5{
    height: 50px;
    width: 100px;
    margin-right: 20px;
  }
  .bottom p{
    font-size: 14px;
  }
  .top p{
    font-weight: bold;
  }
  .bottom img{
    width: 80px;
    height: 80px;
  }
  </style>
  
  